<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">{{'Loading' | translate}}...</div>
          <div ng-if="service">
            <h1>
              {{service.metadata.name}}
              <div class="pull-right dropdown">
                <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">{{'Actions' | translate}}</span></a>
                <ul class="dropdown-menu actions action-link">
                  <li>
                    <edit-link
                      resource="service"
                      kind="services"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      resource-type="service"
                      resource-name="{{service.metadata.name}}"
                      project-name="{{service.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
              <small class="meta">created <relative-timestamp timestamp="service.metadata.creationTimestamp"></relative-timestamp></small>
            </h1>
            <labels labels="service.metadata.labels" clickable="true" kind="services" project-name="{{service.metadata.namespace}}" limit="3"></labels>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row" ng-if="service">
            <div class="col-md-12">
              <uib-tabset>
                <uib-tab active="selectedTab.details">
                  <uib-tab-heading>{{'Details' | translate}}</uib-tab-heading>
                  <div class="resource-details">
                    <dl class="dl-horizontal left">
                      <dt>{{'Selectors' | translate}}:</dt>
                      <dd>
                        <span ng-if="!service.spec.selector"><em>{{'none' | translate}}</em></span>
                        <span ng-repeat="(selectorLabel, selectorValue) in service.spec.selector"> {{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></span>
                      </dd>
                      <dt>{{'Type' | translate}}:</dt>
                      <dd>{{service.spec.type}}</dd>
                      <dt>IP:</dt>
                      <dd>{{service.spec.clusterIP}}</dd>
                      <dt>{{'Sessionaffinity' | translate}}:</dt>
                      <dd>{{service.spec.sessionAffinity}}</dd>
                      <dt ng-if="resource.status.loadBalancer.ingress.length">Ingress points</dt>
                      <dd ng-if="resource.status.loadBalancer.ingress.length">
                        <span ng-repeat="ingress in resource.status.loadBalancer.ingress"
                          >{{ingress.ip}}<span ng-if="!$last">, </span></span>
                      </dd>
                    </dl>
                    <div class="service-table table-responsive">
                      <table ng-if="service.spec.ports.length" style="max-width: 650px;">
                        <thead>
                          <tr>
                            <th>{{'NodePort' | translate}}</th>
                            <th role="presentation"></th>
                            <th>
                              {{'ServicePort' | translate}}
                              <!-- Show cluster IP in column header instead of table body at small screen widths to save space. -->
                              <span class="visible-xs">({{service.spec.clusterIP}})</span>
                            </th>
                            <th role="presentation"></th>
                            <th>{{'TargetPort' | translate}}</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="portMapping in service.spec.ports | orderBy:'port'">
                            <td>
                              <span ng-if="portMapping.nodePort">{{portMapping.nodePort}}</span>
                              <span ng-if="!portMapping.nodePort" class="text-muted">{{'none' | translate}}</span>
                            </td>
                            <td role="presentation" class="text-muted">&#8594;</td>
                            <td>{{portMapping.port}}/{{portMapping.protocol}}
                                <span ng-if="portMapping.name">({{portMapping.name}})</span></td>
                            <td role="presentation" class="text-muted">&#8594;</td>
                            <td>{{portMapping.targetPort}}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- No bottom margin so Create Route link is close to content. -->
                    <dl class="dl-horizontal left" style="margin-bottom: 0;">
                      <dt>{{'Routes' | translate}}:</dt>
                      <dd>
                        <span ng-if="!routesForService.length"><em>{{'none'| translate}}</em></span>
                        <span ng-repeat="route in routesForService">
                            <span ng-if="route | isWebRoute"><a ng-href="{{route | routeWebURL}}">{{route | routeLabel}}</a></span>
                            <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
                            <span ng-show="!$last">, </span>
                        </span>
                      </dd>
                    </dl>
                    <a ng-href="project/{{project.metadata.name}}/create-route?service={{service.metadata.name}}">{{'CreateRoute' | translate}}</a>
                    <annotations annotations="service.metadata.annotations"></annotations>
                  </div>
                </uib-tab>
                <uib-tab active="selectedTab.events">
                  <uib-tab-heading>{{'Events' | translate}}</uib-tab-heading>
                  <events resource-kind="Service" resource-name="{{service.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>
                </uib-tab>
              </uib-tabset>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
